<template>
    <img :class="{'cursor-ptr':!noneAlt}" :alt='alt||noneAlt' :src='bindSrc' :style='styles' @error.once='requestError' @click='showImageView'/>
</template>
<script>
    import {img_whq} from 'filters/index'
    export default {
        name: 'ImgPath',
        props: {
            alt: {
                type: String,
                default: ''
            },
            src: {
                type: String,
                default: ''
            },
            w:{
                type: Number,
                default: 0
            },
            h:{
                type: Number,
                default: 0
            },
            r:{
                type: Number,
                default: 1
            },
            limit:{//指定当目标缩略图大于原图时是否处理。值是 1 表示不处理；值是 0 表示处理。
                type: Number,
                default: 0
            },
            auto:{
                type: Boolean,
                default: true
            },
            view:{
                type: Boolean,
                default: true
            }
        },
        data () {
            return {
                noneAlt:'',
                bindSrc:'',
                viewSrc:'',
                img_w:this.w,
                img_h:this.h,
                styles: {},
                visible:false
            }
        },
        created(){
            this.initSrc(this.src);
        },
        methods:{
            initSrc(value){
                this.noneAlt = "";
                this.img_w = this.w*this.r;
                this.img_h = this.h&&this.h*this.r;
                if(value&&img_whq(value)){
                    if(this.view){this.viewSrc = img_whq(value) }
                    if(!this.img_w){
                        this.bindSrc = img_whq(value);
                        return false
                    }
                    let sr = img_whq(value)+'?x-oss-process=image/resize';
                    if(this.img_h){
                        sr+=',m_fill,limit_'+this.limit+',w_'+this.img_w+',h_'+this.img_h;//固定宽高，将延伸出指定w与h的矩形框外的最小图片进行居中裁剪。
                    }else{
                        sr+=',m_lfit,limit_'+this.limit+',w_'+this.img_w;//等比缩放，限制在设定在指定w与h的矩形内的最大图片。
                    }
                    this.$set(this,'bindSrc',sr);
                    this.bindSrc = sr;
                    this.$set(this,'styles',{});
                }else {
                    this.$set(this,'bindSrc','');
                    if(value==''){
                        this.$set(this,'styles',{opacity:'0.5'});
                        this.noneAlt = "无"
                    }else{
                        this.$set(this,'styles',{color:'#f00'});
                        this.noneAlt = "数据异常"
                    }
                }
            },
            requestError(){
                if(!this.auto){
                    this.styles = {
                        width:this.img_w+'px',
                        height:this.img_h+'px'
                    }
                }
            },
            showImageView(){
                if(this.noneAlt!=''){return false}
                var _t = this;
                let model = this.$Modal.confirm({
                    width:'60%',
                    vModel:this.visible,
                    closable:true,
                    render: (h) => {
                        return h('img', {
                            attrs: {'src':this.viewSrc},
                            style:{'max-width':'100%','margin':'auto','display':'block'},
                            on:{
                                click(){
                                    _t.$Modal.remove();
                                }
                            }
                        })
                    }
                });
            },
            modalRender(h){
               return h('img',{src:this.viewSrc,style:{width:'100%'}})
            }
        },
        watch:{
            src(value){
                this.initSrc(value);
            }
        }
    }
</script>
